<template>
  <div>

      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 图片分类管理</el-breadcrumb-item>
              <el-breadcrumb-item>添加图片分类/修改图片分类</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="container">
          <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="名称">
                  <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                  <el-input v-model="form.description"></el-input>
              </el-form-item>
              <el-form-item label="图片">
                  <el-upload
                      action="http://127.0.0.1:7777/api/photo/app/uploadImg"
                      method="post"
                      enctype="multipart/form-data"
                      list-type="picture-card"
                      :on-preview="handlePictureCardPreview"
                      :on-success="photoSuccess"
                      :on-remove="removePhoto"
                      :file-list="photoList"
                  >
                      <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="save">立即创建</el-button>
              </el-form-item>
          </el-form>
      </div>
  </div>
</template>
<script>
import { addTag, updateTag } from '@/utils';
import { Notification } from 'element-ui';

export default {
  data() {
      return {
          form: {
              name: '',
              description: '',
              icon: ''
          },
          photoList: [],
          dialogVisible: false,
          dialogImageUrl:"",
          uploadFlag: false,
      };
  },
  created() {
      var userId = localStorage.getItem('user');
      console.log(userId);
      if (userId != null) {
          // this.form = JSON.parse(userId);
          console.log(this.form);
          let photo = {};
          // photo.name = this.form.icon;
          // photo.url = this.form.icon;
          this.photoList.push(photo);
          console.log(this.photoList);
      }
      console.log('this.1111111', JSON.parse(this.$route.query.update));
      if (JSON.parse(this.$route.query.update)) {
        this.uploadFlag = true
        this.form = JSON.parse(this.$route.query.update)
      }
  },
  methods: {
      photoSuccess(response) {
          if (response.code == 500) {
              Notification.error({
                  title: '上传失败，系统错误'
              });
          }
          this.form.icon = response.data.url;
      },
      handlePictureCardPreview(file) {
          this.dialogVisible = true;
          if (this.form.icon != '') {
              this.dialogImageUrl = this.form.icon;
          } else {
              this.dialogImageUrl = file.url;
          }
      },
      removePhoto() {
          this.form.icon = '';
      },
      save() {
        console.log('this.form', this.form);
          var userId = localStorage.getItem('userId');
          if (this.uploadFlag) {
              updateTag(this.form).then(res => {
                  console.log(res);
                  this.$message.success(res.data.msg);
              });
          } else {
              //直接保存用户
              addTag(this.form).then(res => {
                  console.log(res);
                  this.$message.success(res.data.msg);
              });
          }
          this.$router.push('/imgSort');
      }
  }
};
</script>
